<template>
  <div class="main">
    <div class="back-red" @click="back"></div>
    <div class="page-top">党建统领</div>
    <div class="main-box">
      <div class="left-side">
        <div class="orgStr">
          <div class="orgStr-title">
            <span
              class="orgSwitcher"
              :class="[orgIsActived == 0 ? 'active' : 'disable']"
              @click="switchOrg(0)">组织架构</span><span class="disable">/</span>
              <span
              class="orgSwitcher"
              :class="[orgIsActived == 1 ? 'active' : 'disable']"
              @click="switchOrg(1)">组织介绍</span>
          </div>
          <div class="org-box-main">
          <div class="org-box" v-show="orgIsActived == 0">
            <div class="overview-data">
              联合党支部<br /><span class="heightlight">{{orgData.memberCount}}</span>
              人<br />
              书记：<span class="heightlight">{{ orgData.secretary }}</span>
            </div>
            <div class="org-list">
              <div class="table-header">
                <div class="table-column">姓名</div>
                <div class="table-column">职务</div>
                <div class="table-column">分工</div>
              </div>
              <div class="table-list">
                <vue-seamless-scroll
                  :data="memberList"
                  class="seamless-warp"
                  :class-option="classOption">
                  <div v-for="(item, index) in memberList" :key="index" class="list-item">
                    <div class="item-data">{{ item.name }}</div>
                    <div class="item-data">{{ item.duty }}</div>
                    <div class="item-data">{{ item.identity }}</div>
                  </div>
                </vue-seamless-scroll>
              </div>
               <!-- <div class="color-cover"></div> -->
            </div>
          </div>
          <div v-show="orgIsActived == 1" class="orgtro">
          <div class="imgdiv">
            <div class="image">联合党支部</div>
          </div>
          </div>
          </div>
        </div>
        <div class="memberType">
            <div class="memberType-box">
            <span
              class="memberTypeSwitcher"
              :class="[type1IsActived == 0 ? 'active' : 'disable']"
              @click="switchType1(0)">党员类型</span><span class="disable">/</span>
              <span
              class="memberTypeSwitcher"
              :class="[type1IsActived == 1 ? 'active' : 'disable']"
              @click="switchType1(1)">党员学历比例</span>
              <div ref="bar1" v-show="type1IsActived==0" style="width: 300px; height:240px;margin-top: 10px;"></div>
              <div ref="bar2" v-show="type1IsActived==1" style="width: 300px; height:240px;margin-top: 10px;"></div>
          </div>
            <div class="memberType-box">
            <span
              class="memberTypeSwitcher"
              :class="[type2IsActived == 0 ? 'active' : 'disable']"
              @click="switchType2(0)">党员性别比例</span><span class="disable">/</span>
              <span
              class="memberTypeSwitcher"
              :class="[type2IsActived == 1 ? 'active' : 'disable']"
              @click="switchType2(1)">党员年龄比例</span>
              <div class="sexrratio" v-show="type2IsActived==0" style="height:240px;">
              <div class="line manline" style="padding-top: 25px;">
                <img src = '../assets/images/partyBuilding/man_icon.png' class="icon" />
                <div class="line-label">男 {{(manpercent).toFixed(1)}}%</div>
                <el-progress :percentage="manpercent" :format="format" color="#EAD196"></el-progress>
                </div>
              <div class="line womanline">
                <img src = '../assets/images/partyBuilding/woman_icon.png' class="icon" />
                 <div class="line-label">女 {{(womanmanpercent).toFixed(1)}}%</div>
                <el-progress :percentage="womanmanpercent" :format="format" color="#EAD196"></el-progress>
                </div>
              </div>
              <div class="sexrratio" v-show="type2IsActived==1">
               <div ref="bar3" style="width: 300px; height:240px;"></div>
              </div>
          </div>
        </div>
        <div class="memberInfo">
          <div class="memberInfoSwitcher-box">
           <span
              class="memberInfoSwitcher"
              :class="[infoIsActived == 0 ? 'active' : 'disable']"
              @click="switchInfo(0)">党员信息</span><span class="disable">/</span>
              <span
              class="memberInfoSwitcher"
              :class="[infoIsActived == 1 ? 'active' : 'disable']"
              @click="switchInfo(1)">党员生日</span><span class="disable">/</span>
              <span
              class="memberInfoSwitcher"
              :class="[infoIsActived == 2 ? 'active' : 'disable']"
              @click="switchInfo(2)">党员贡献</span>
              </div>
              <div class="memberInfo-box" v-show="infoIsActived==0" style=" margin-top: -15px;">
              <select class="orgType" v-model="orgType" placeholder="请选择" >
              <option
                v-for="item in orgTypeOptions"
                :key="item.typeId"
                :label="item.typeName"
                :value="item.typeId">
              </option>
              </select>
               <div class="table-header">
                <div class="table-column" style="width:10%">姓名</div>
                <div class="table-column" style="width:20%">党支部</div>
                <div class="table-column" style="width:20%">入党时间</div>
                <div class="table-column" style="width:30%">职务</div>
                <div class="table-column" style="width:20%">本月党费缴纳</div>
              </div>
               <div class="table-list">
                <vue-seamless-scroll
                  :data="memberList"
                  class="seamless-warp"
                  :class-option="classOption1">
                  <div v-for="(item, index) in memberInfoList" :key="index" class="list-item">
                    <div class="item-data" style="width:10%">{{ item.name }}</div>
                    <div class="item-data" style="width:20%">{{ item.orgName }}</div>
                    <div class="item-data" style="width:20%">{{ item.date }}</div>
                    <div class="item-data" style="width:30%">{{ item.identity }}</div>
                    <div class="item-data" style="width:20%">{{ item.payed ==1 ? '已缴纳':'未缴纳' }}</div>
                  </div>
                </vue-seamless-scroll>
              </div>
              </div>
            <div class="memberInfo-box" v-if="infoIsActived==1">
               <div class="table-header">
                <div class="table-column" style="width:100%">党员生日</div>
              </div>
               <div class="table-list">
                <vue-seamless-scroll
                  :data="memberBirthdayInfoList"
                  class="seamless-warp"
                  :class-option="classOption2">
                  <div v-for="(item, index) in memberBirthdayInfoList" :key="index" class="list-item">
                    <div class="item-data" style="width:100%">{{ item.name }}还有{{ item.countDown}}天生日</div>
                  </div>
                </vue-seamless-scroll>
                  <div class="color-bar" style="bottom:200px;"></div>
                  <div class="color-bar" style="bottom:80px;"></div>
              </div>
              </div>
              <div class="memberInfo-box" v-if="infoIsActived==2">
               <div class="table-header">
                <div class="table-column" style="width:100%">党员贡献</div>
              </div>
               <div class="table-list">
                <vue-seamless-scroll
                  :data="memberContributionInfoList"
                  class="seamless-warp"
                  :class-option="classOption2">
                  <div v-for="(item, index) in memberContributionInfoList" :key="index" class="list-item">
                    <div class="item-data" style="width:100%">{{ item.name }} 精准致富成交{{ item.dealCount}}元，重量{{item.weightCount}}吨</div>
                  </div>
                </vue-seamless-scroll>
                  <div class="color-bar" style="bottom:200px;"></div>
                  <div class="color-bar" style="bottom:80px;"></div>
              </div>
              </div>
        </div>
      </div>
      <div class="center-side">
        <div class="header-box">
          <table class="header-table">
          <tr style="height:50px;">
            <th style="text-align: right;padding-right: 40px;"> <img class="header-icon" src="../assets/images/partyBuilding/zb_icon.png" alt="">
            支部数 <span class="header-data">{{headerData.zbCount}}</span> 个</th>
            <th>   <img class="header-icon" src="../assets/images/partyBuilding/dy_icon.png" alt="">
            党员数 <span class="header-data">{{headerData.dyCount}}</span> 位</th>
          </tr>
          <tr>
            <td style="line-height:40px;text-align: right;padding-right: 40px;">   <img class="header-icon" src="../assets/images/partyBuilding/xx_icon.png" alt="">
            党员总学习时长 <span class="header-data"><br>{{headerData.xxCount}}</span> 小时</td>
            <td style="padding-left:10px;"> <img class="header-icon" src="../assets/images/partyBuilding/hd_icon.png" alt="">
            活动次数 <span class="header-data">{{headerData.hdCount}}</span> 次</td>
          </tr>
        </table>
        </div>
        <div class="honorRoll-box">
          <div class="title">党员光荣榜</div>
          <div class="roll-list">
            <vue-seamless-scroll
                  :data="dy_hourRollList"
                  class="seamless-warp"
                  :class-option="classOption3">
                   <div class="list-item" v-for="(item, index) in dy_hourRollList" :key="index">
                    <div class="item-data">
                      <div class="data-left">
                          <img :src="item.avart" style="width:110px;height: 140px;" alt="">
                          <div class="person-info">
                          姓名：{{ item.name }}<br><br>
                          党支部：{{ item.org}}</div>
                      </div>
                      <div class="data-right">
                      {{item.tro}}
                      </div>
                    </div>
                  </div>
                </vue-seamless-scroll>
          </div>
        </div>
      </div>
      <div class="right-side">
        <div class="hd-box">
          <div class="title">组织活动</div>
           <el-carousel height="300px" style="margin-top:20px;" indicator-position="none">
            <el-carousel-item v-for="(item,index) in orgList" :key="index">
            <img :src="item.url"/>
              <h3 class="img-label">{{ item.name }}</h3>
            </el-carousel-item>
          </el-carousel>
              <div class="hd-list">
              <div class="table-header">
                <div class="table-column" style="width:50%">活动主题</div>
                <div class="table-column" style="width:30%">活动时间</div>
                <div class="table-column" style="width:20%">主持人</div>
              </div>
              <div class="table-list">
                <vue-seamless-scroll
                  :data="hdList"
                  class="seamless-warp"
                  :class-option="classOption4">
                  <div v-for="(item, index) in hdList" :key="index" class="list-item">
                    <div class="item-data" style="width:50%">{{ item.theme }}</div>
                    <div class="item-data" style="width:30%">{{ item.date }}</div>
                    <div class="item-data" style="width:20%">{{ item.host }}</div>
                  </div>
                </vue-seamless-scroll>
              </div>
               <!-- <div class="color-cover"></div> -->
            </div>
        </div>
        <div class="newsBox">
          <div class="title">党建要闻</div>
              <div class="news-list">
                <vue-seamless-scroll
                  :data="newsList"
                  class="seamless-warp"
                  :class-option="classOption5">
                  <div v-for="(item, index) in newsList" :key="index" class="list-item">
                  <a :href="item.herfto" target="_blank" style="color:#EAD196 ;">
                   <div class="triangle"></div><div class="item-data">{{ item.title }}</div>
                   </a>
                  </div>
                </vue-seamless-scroll>
              </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "PartyBuilding",
  components: {},
  data() {
    return {
      //组织架构/组织介绍激活卡
      orgIsActived: 0,
      //党员类型、学历
      type1IsActived:0,
      //党员性别、年龄
      type2IsActived:1,
      //党员信息、党员生日、党员贡献
      infoIsActived:0,
      //选择的党支部类型
      orgType:1,
      //党支部类型
      orgTypeOptions:[
        {typeId:1, typeName: "联合党支部"},
        {typeId:2, typeName: "经营党支部"},
        {typeId:3, typeName: "企业党支部"},
        {typeId:4, typeName: "新联会"}
      ],
      //中间-顶部数据
      headerData:{
        zbCount:4,
        dyCount:139,
        xxCount:556,
        hdCount:18,
      },
      //组织数据
      orgData: {
        memberCount: 39,
        secretary: "张磊",
      },
      classOption: {
        step: 0.5, // 数值越大速度滚动越快
        limitMoveNum: 4, // 开始无缝滚动的数据量 this.cityData.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 40, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 2000, // 单步运动停止的时间(默认值1000ms)
      },
        classOption1: {
        step: 0.5,
        limitMoveNum: 4,
        hoverStop: true,
        direction: 1,
        openWatch: true,
        singleHeight: 55,
        singleWidth: 0,
        waitTime: 2000,
      },
        classOption2: {
        step: 0.5,
        limitMoveNum: 4,
        hoverStop: true,
        direction: 1,
        openWatch: true,
        singleHeight: 56,
        singleWidth: 0,
        waitTime: 2000,
      },
        classOption3: {
        step: 1,
        limitMoveNum: 2,
        hoverStop: true,
        direction: 1,
        openWatch: true,
        singleHeight: 281,
        singleWidth: 0,
        waitTime: 2000,
      },
        classOption4: {
        step: 0.5,
        limitMoveNum: 3,
        hoverStop: true,
        direction: 1,
        openWatch: true,
        singleWidth: 0,
        waitTime: 2000,
      },
        classOption5: {
        step: 0.5,
        limitMoveNum: 3,
        hoverStop: true,
        direction: 1,
        openWatch: true,
        singleHeight: 45,
        singleWidth: 0,
        waitTime: 2000,
      },
      sexCount:{
        man:60,
        woman:30
      },
      //组织架构成员列表  左上-列表
      memberList: [
        {name:"张磊",duty:"理事",identity:"蔬菜协会会长",date:"2008-08-03"},
        {name:"李璇",duty:"成员",identity:"蔬菜区经营户",date:"2012-06-24"},
        {name:"胡意旋",duty:"成员",identity:"蔬菜区经营户",date:"2015-05-15"},
        {name:"方旭",duty:"成员",identity:"蔬菜区经营户",date:"2018-04-16"},
        {name:"刘浩然",duty:"成员",identity:"蔬菜区经营户",date:"2020-05-17"},
        {name:"党欣",duty:"成员",identity:"蔬菜区经营户",date:"2013-11-18"},
        {name:"李佳丽",duty:"成员",identity:"蔬菜区经营户",date:"2019-05-19"},
        {name:"李芳",duty:"成员",identity:"蔬菜区经营户",date:"2021-12-20"},
        {name:"张若华",duty:"成员",identity:"蔬菜区经营户",date:"2006-09-21"},
        {name:"张悦",duty:"成员",identity:"蔬菜区经营户",date:"2010-05-22"}],
      //党员信息列表  左下-列表1
      memberInfoList:[
        {name:"张磊",duty:"理事",orgName:'联合党支部',identity:"蔬菜协会会长",date:"2008-08-03",payed:1},
        {name:"李璇",duty:"成员",orgName:'联合党支部',identity:"蔬菜区经营户",date:"2012-06-24",payed:1},
        {name:"胡意旋",duty:"成员",orgName:'联合党支部',identity:"蔬菜区经营户",date:"2015-05-15",payed:1},
        {name:"方旭",duty:"成员",orgName:'联合党支部',identity:"蔬菜区经营户",date:"2018-04-16",payed:1},
        {name:"刘浩然",duty:"成员",orgName:'联合党支部',identity:"蔬菜区经营户",date:"2020-05-17",payed:1},
        {name:"党欣",duty:"成员",orgName:'联合党支部',identity:"蔬菜区经营户",date:"2013-11-18",payed:1},
        {name:"李佳丽",duty:"成员",orgName:'联合党支部',identity:"蔬菜区经营户",date:"2019-05-19",payed:1},
        {name:"李芳",duty:"成员",orgName:'联合党支部',identity:"蔬菜区经营户",date:"2021-12-20",payed:1},
        {name:"张若华",duty:"成员",orgName:'联合党支部',identity:"蔬菜区经营户",date:"2006-09-21",payed:1},
        {name:"张悦",duty:"成员",orgName:'联合党支部',identity:"蔬菜区经营户",date:"2010-05-22",payed:1}
      ],
      //党员生日信息列表  左下-列表2
      memberBirthdayInfoList:[
        {name:'张磊',countDown:5},
        {name:'李璇',countDown:4},
        {name:'胡意旋',countDown:5},
        {name:'方旭',countDown:3},
        {name:'刘浩然',countDown:1},
      ],
      //党员贡献信息列表  左下-列表3
      memberContributionInfoList:[
        {name:'张磊',weightCount:186,dealCount:1328198},
        {name:'张若华',weightCount:126,dealCount:1025464},
        {name:'李佳丽',weightCount:156,dealCount:5748786},
        {name:'方旭',weightCount:122,dealCount:12345},
        {name:'党欣',weightCount:193,dealCount:868612},
      ],
      //党员光荣榜   中下列表
      dy_hourRollList:[
        {name:'郑凡巧',avart:require('../assets/images/partyBuilding/avart_exp.png'),org:'企业党支部',tro:'郑凡巧时刻牢记党员身份，坚定共产党员理想信念追求，矢志报国为农产品事业作出贡献，几十年如一日，帮助乡镇种植户售卖农产品达100吨，为种植户创收50万元，他用实际行动诠释了一名老党员的爱党爱国爱民之情。“只卖放心产品，推动共同富裕"，张磊经营农产品以来，一直用自身行动践行这句话，他胸怀祖国、服务人民，不仅是消费者放心的经营户，蔬菜区经营户的引领者，更是优秀共产党员崇高品德和模范作用的践行者。'},
      ],
      //右上角--组织列表-轮播图
      orgList:[
        {name:'联合党支部',url:require('../assets/images/partyBuilding/图片2.png')},
        // {name:'社区党支部',url:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.jj20.com%2Fup%2Fallimg%2F611%2F010913163107%2F130109163107-7.jpg&refer=http%3A%2F%2Fpic.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1659695525&t=fb2962252bf6b1f8f7ec44306ef7a3a2'},
        // {name:'经营党支部',url:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fphoto%2F2012-3-2%2Fenterdesk.com-B526ECADD33DBD367676A93E051BA1EC.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1659695525&t=b3cbdb5804ad36263dfa9e0334bea32a'},
        // {name:'新联会',url:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.jj20.com%2Fup%2Fallimg%2F611%2F010913163107%2F130109163107-7.jpg&refer=http%3A%2F%2Fpic.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1659695525&t=fb2962252bf6b1f8f7ec44306ef7a3a2'},
      ],
      //右中--活动列表
      hdList:[
        {theme:'庆祝香港回归祖国25周年',date:'2022-07-05',host:'张磊'}
      ],
      //右下--新闻列表
      newsList:[
        {newsId:'1',title:'学习平台：学习贯彻中国特色社会主义思想',herfto:'https://www.12371.cn/special/xxzd/'},
        {newsId:'2',title:'抓党建，促乡村振兴',herfto:'https://www.12371.cn/special/xczx/'},
        {newsId:'3',title:'喜迎二十大，奋进新征程',herfto:'https://www.12371.cn/special/xy20d/'},
        {newsId:'4',title:'党旗在基层一线高高飘扬',herfto:'https://www.12371.cn/special/jcyxdqpy/'},
        {newsId:'5',title:'共产党员网',herfto:'https://www.12371.cn/'},
        {newsId:'6',title:'中共中央党校理论网',herfto:'http://www.cntheory.com/'},
        {newsId:'7',title:'人民论坛网',herfto:'http://www.rmlt.com.cn/'},
        {newsId:'8',title:'人民日报理论版',herfto:'http://theory.people.com.cn/GB/245417/index.html'},
        {newsId:'9',title:'求是网',herfto:'http://www.qstheory.cn/'},
        {newsId:'10',title:'思想政治工作',herfto:'http://www.wenming.cn/zyh/'},
      ]
    };
  },
  mounted(){
    this.initBar1()
    this.initBar2()
    this.initBar3()
  },
  computed:{
    manpercent(){
      return ((this.sexCount.man) / (this.sexCount.man + this.sexCount.woman)).toFixed(10) * 100;
    },
    womanmanpercent(){
      return ((this.sexCount.woman) / (this.sexCount.man + this.sexCount.woman)).toFixed(10) * 100;
    },
    totalCount(){
      return (this.sexCount.man + this.sexCount.woman)
      }
  },
  methods: {
    back () {
      this.$router.go(-1)
    },
    //左上 切换
    switchOrg(index) {
      this.orgIsActived = index;
    },
    //左中1 切换
    switchType1(index){
        this.type1IsActived = index
    },
    //左中2 切换
    switchType2(index){
        this.type2IsActived = index
    },
    //左下 切换
    switchInfo(index){
        this.infoIsActived = index
    },
    //图表1--党员类型比例环图
    initBar1(){
    let colors = ['#cc7835', '#F3AF7E', '#A06136']
    let  options = {
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c}人'
    },
    color: colors,
    legend: {
        top: '20%',
        left: '60%',
        itemGap:30,
        icon:'circle',
        itemHeight: 7,
        textStyle: {
        fontSize: 14,
        color: '#F3AF7E'
        }
    },
    series: [
        {
        name: '党员类型',
        type: 'pie',
        radius: ['40%', '60%'],
        avoidLabelOverlap: false,
        center: ['30%', '45%'],
        label: {
            show: false,
            position: 'center',
        },
        labelLine: {
            show: false
        },
        data: [
            { value: 1048, name: '入党积极分子' },
            { value: 735, name: '发展党员' },
            { value: 580, name: '正式党员' },
        ]
        }
    ]
    };
    echarts.init(this.$refs.bar1).setOption(options);
    },
    //图表2--党员学历比例饼图
    initBar2(){
        let datas = [
        { value: 335, name: '高中及以下'},
        { value: 310, name: '大专'},
        { value: 274, name: '本科及以上'},
        ]
        let colors = ['#cc7835', '#F3AF7E', '#A06136']
        let legendData = []
        for (var j = 0; j < datas.length; j++) {
        var data = {
            name: datas[j].name,
            icon: 'circle',
            textStyle: {
            fontSize: 14,
            color: '#F3AF7E'
            }
        }
        legendData.push(data)
        }
        let options = {
        legend: {
            top: '20%',
            left: '60%',
            itemHeight: 7,
            itemGap: 30,
            data: legendData,
            formatter: function (name) {
            return `${name}`
            },
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c}人 ({d}%)'
        },
        color: colors,
        series: [
            {
            name: '学历',
            type: 'pie',
            radius: '70%',
            center: ['30%', '45%'],
            label: {
            fontSize: 14,
                  normal: {
                    show: false,
                        },
            },
            data: datas,
            roseType: 'radius',
            animationType: 'scale',
            animationEasing: 'elasticOut',
            animationDelay: function (idx) {
                return Math.random() * 200
            }
            }
        ]
        }
        echarts.init(this.$refs.bar2).setOption(options);
            },
      //图表3--党员年龄比例饼图
    initBar3(){
      let  options = {
    normal: {
        top: 200,
        left: 300,
        width: 500,
        height: 400,
        zIndex: 6,
        backgroundColor: ""
    },
    color: ["rgba(230,210,157, 1)"],
    tooltip: {
        show: true,
        trigger: "item"
    },
    radar: {
        center: ["50%", "50%"],
        radius: "70%",
        startAngle: 90,
        splitNumber: 4,
        shape: "circle",
        splitArea: {
            areaStyle: {
                color: ["transparent"]
            }
        },
            axisLabel: {
            show: false,
            fontSize: 18,
            color: "#fff",
            fontStyle: "normal",
            fontWeight: "normal"
        },
        axisLine: {
            show: true,
            lineStyle: {
                color: "#EAD196",//
                type:'dashed'
            }
        },
        splitLine: {
            show: true,
            lineStyle: {
                color: "rgba(234,209,150, 0.5)",
                type:'dashed'//
            }
        },
        indicator: [{
            name: "61岁以上",
            max: 88
        }, {
            name: "28岁以下",
            max: 88
        }, {
            name: "29-35岁",
            max: 88
        }, {
            name: "36-50岁",
            max: 88
        }, {
            name: "51-60岁",
            max: 88
        }, ]
    },
    series: [{
        name: "党员年龄比例",
        type: "radar",
        symbol: "circle",
        symbolSize: 5,
        areaStyle: {
            normal: {
                color: "rgba(234,209,150, 0.8)"
            }
        },
        itemStyle:{
            color:'rgba(255,255,255, 1)',
            borderWidth:1,
        },
        lineStyle: {
            normal: {
                type: "soild",
                color: "rgba(255,255,255, 0.8)",
                width: 1
            }
        },
        data: [
            [80, 50, 55, 80, 50]
        ]
    }, ]
};
        echarts.init(this.$refs.bar3).setOption(options);
            },
    format(value) {
      return  `${((value * this.totalCount)/100).toFixed(0)} 人`
        // if(type == 'man'){
        //     return `${this.sexCount.man}人`;
        // }else{
        //     return `${this.sexCount.woman}人`;
        // }

      }

        },
};
</script>
<style lang="less" scoped>
@import "../assets/style/partyBuilding.css";
</style>
